import React from "react"

import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';  //导入组件
import axios from "axios"  //导入axios发起接口请求

import './index.scss'
//导入图片
import Nav1 from "../../assets/images/nav-1.png"
import Nav2 from "../../assets/images/nav-2.png"
import Nav3 from "../../assets/images/nav-3.png"
import Nav4 from "../../assets/images/nav-4.png"
// 导入url
import { BASE_URL } from "../../utils/url";
import { getCurrentCity } from "../../utils";  //获取定位城市方法
import SearchHeader from "../../components/SearchHeader";
// 导航菜单的数据
const navs = [{
    id: 0,
    img: Nav1,
    title: '整租',
    path: '/home/list'
}, {
    id: 1,
    img: Nav2,
    title: '合租',
    path: '/home/list'
}, {
    id: 2,
    img: Nav3,
    title: '地图找房',
    path: '/map'
}, {
    id: 3,
    img: Nav4,
    title: '去出租',
    path: '/home/list'
}]

//获取地理位置信息
// navigator.geolocation.getCurrentPosition(position => {
//     console.log(position);
// })

export default class Index extends React.Component {
    state = {
        // 轮播图状态
        swipers: [],
        // 租房小组状态
        groups: [],
        // 最新资讯列表
        News: [],
        //默认选择的城市
        currCity: '上海',
        isSwiperLoaded: false  //轮播图bug
    }
    async componentDidMount() {

        // 调用请求轮播图的方法
        this.getSwipers()
        // 调用请求租房小组的方法
        this.getGroups()
        //获取最新资讯
        this.getNews()
        //获取百度地图
        // const myCity = new window.BMapGL.LocalCity();
        // myCity.get(async res => {
        //     const result = await axios.get(
        //         `http://localhost:8080/area/info?name=${res.name}`
        //     )
        //     // console.log(result);
        //     this.setState({
        //         currCity: result.data.body.label
        //     })
        // }
        // );
        const curCity = await getCurrentCity()

        this.setState({
            currCity: curCity.label
        })
    }


    //获取轮播图数据
    async getSwipers() {
        // 请求数据
        let { data: res } = await axios.get('http://localhost:8080/home/swiper')
        // 判断返回的状态是否是成功
        if (res.status !== 200) {
            console.error(res.description)
            return
        }
        // 把获取到的值设置给state
        this.setState({
            swipers: res.body,
            isSwiperLoaded: true
        })

    }
    // 渲染轮播图的逻辑代码
    renderSwipers() {
        return this.state.swipers.map(item => (
            <a
                key={item.id}
                href="http://www.itcast.cn"
                style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
                <img
                    src={BASE_URL + item.imgSrc}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                />
            </a>
        ))
    }
    //渲染导航菜单
    renderNavs() {
        return navs.map(item => {
            return (<Flex.Item key={item.id} onClick={() => { this.props.history.push(item.path) }}>
                <img src={item.img} alt='' />
                <h2>{item.title}</h2>
            </Flex.Item>)
        })

    }
    //获取租房小组
    async getGroups() {
        let { data: res } = await axios.get('http://localhost:8080/home/groups', {
            params: {
                area: 'area=AREA%7C88cff55c-aaa4-e2e0'
            }
        })
        // 判断返回的状态是否是成功
        if (res.status !== 200) {
            console.error(res.description)
            return
        }
        this.setState({
            groups: res.body
        })
    }
    // 渲染租房小组
    renderGroups(item) {
        return <Flex className="group-item" justify="around">
            <div className="desc">
                <p className="title">{item.title}</p>
                <span className="info">{item.desc}</span>
            </div>
            <img src={BASE_URL + item.imgSrc} alt="" />
        </Flex>

    }
    //获取最新资讯
    async getNews() {
        let { data: res } = await axios.get('http://localhost:8080/home/news', {
            params: {
                area: 'area=AREA%7C88cff55c-aaa4-e2e0'
            }
        })
        // 判断返回的状态是否是成功
        if (res.status !== 200) {
            console.error(res.description)
            return
        }
        this.setState({
            News: res.body
        })

    }
    //渲染最新资讯
    renderNews() {
        return this.state.News.map(item => {
            return (
                <div className="news-item" key={item.id}>
                    <div className="imgwrap">
                        <img className="img" alt='' src={BASE_URL + item.imgSrc}></img>
                    </div>
                    <Flex className="content" direction="column" justify="between" >
                        <h3 className="title">{item.title}</h3>
                        <Flex className="info" justify="between">
                            <span>{item.from}</span>
                            <span>{item.date}</span>
                        </Flex>
                    </Flex>

                </div>
            )
        })
    }
    render() {
        return (
            <div className="index">
                {/* 轮播图区域 */}
                <div className="swipers">
                    {this.state.isSwiperLoaded ? (<Carousel
                        autoplay={true}
                        infinite
                        autoplayInterval='2000'
                        dotActiveStyle={{ backgroundColor: '#fff' }}
                    >
                        {/* 调用渲染轮播图的方法 */}
                        {this.renderSwipers()}
                    </Carousel>) : ('')}

                </div>
                {/* 轮播图区域 */}

                {/* 搜索框 */}

                <SearchHeader cityName={this.state.currCity} />
                {/* 搜索框 */}
                {/* 导航区域 */}
                <Flex className="nav">
                    {this.renderNavs()}
                </Flex>
                {/* 导航区域 */}
                {/* 租房小组 */}
                <div className="group">
                    <h3 className="group-title">
                        租房小组
                        <span className="more" onClick={() => { this.props.history.push('/home/list') }}>更多</span>
                    </h3>
                    <Grid data={this.state.groups} hasLine={false} columnNum={2} square={false} renderItem={item => this.renderGroups(item)} />
                </div>
                {/* 租房小组 */}
                {/* 最新资讯 */}
                <div className="news">
                    <h3 className="group-title">最新资讯</h3>
                    <WingBlank size="md">{this.renderNews()}</WingBlank>
                </div>
                {/* 最新资讯 */}
            </div >
        )
    }

}

